<template>
  <el-breadcrumb class="xt-breacrumb" :separator="separator" v-if="options?.length">
    <template v-for="op in options" :key="op.label">
      <el-breadcrumb-item v-if="op.code" :to="op.code">
        {{ setI18n(op.i18n, op.name) }}
      </el-breadcrumb-item>
      <el-breadcrumb-item v-else>
        {{ setI18n(op.i18n, op.name) }}
      </el-breadcrumb-item>
    </template>
  </el-breadcrumb>
</template>

<script lang="ts">
export default {
  name: "xt-breadcrumb",
};
</script>

<script setup lang="ts">
import { useLocalI18n } from "@/locales/i18n";
import { OptionType } from "@/typings";

interface PropType {
  separator?: string;
  options: OptionType[];
}

const { setI18n } = useLocalI18n();

withDefaults(defineProps<PropType>(), {
  separator: "/",
  options: () => [],
});
</script>
